<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>电子围栏</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,body,#container{
            width: 100%;
            height: 100%;  
            position: relative;
        }
        #bmap{
            position: absolute;
            top: 0;
            left: 460px;
            bottom: 0; 
            right: 0;
        }
        #controller{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 460px;
            border-right: 1px solid #A4D4F5;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
        }  
        #controller .controller-inner{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{
            opacity:1;
            -webkit-transform:scaleY(1);
            transform:scaleY(1);
            -webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
            transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
            transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);
            transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
            -webkit-transform-origin:center bottom;
            transform-origin:center bottom;
        }
        .el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{
            opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)
        }
        #container .circular-ctrl{
            position: absolute;
            width: 400px;
            bottom: 10px;
            right: 10px;
            border: 1px solid #A4D4F5;
            background-color: #ffffff;
        }
        #container .area-ctrl{
            position: absolute;
            width: 400px;
            bottom: 10px;
            left:470px;
            border: 1px solid #A4D4F5;
            background-color: #ffffff;
        }

        
        .ivu-drawer {
            width: auto;
            height: 100%;
            position: fixed;
            top: 0
        }

        .ivu-drawer-inner {
            position: absolute
        }

        .ivu-drawer-left {
            left: 0
        }

        .ivu-drawer-right {
            right: 0
        }

        .ivu-drawer-hidden {
            display: none!important
        }

        .ivu-drawer-wrap {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            -webkit-overflow-scrolling: touch;
            outline: 0
        }

        .ivu-drawer-wrap-inner {
            position: absolute;
            overflow: hidden
        }

        .ivu-drawer-wrap * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }

        .ivu-drawer-mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(55, 55, 55, .6);
            height: 100%;
            z-index: 1000
        }

        .ivu-drawer-mask-hidden {
            display: none
        }

        .ivu-drawer-mask-inner {
            position: absolute
        }

        .ivu-drawer-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: #fff;
            border: 0;
            background-clip: padding-box;
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
        }

        .ivu-drawer-content-no-mask {
            pointer-events: auto
        }

        .ivu-drawer-header {
            border-bottom: 1px solid #e8eaec;
            padding: 14px 16px;
            line-height: 1
        }

        .ivu-drawer-header p, .ivu-drawer-header-inner {
            display: inline-block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #17233d;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .ivu-drawer-header p i, .ivu-drawer-header p span {
            vertical-align: middle
        }

        .ivu-drawer-close {
            z-index: 1;
            font-size: 12px;
            position: absolute;
            right: 8px;
            top: 8px;
            overflow: hidden;
            cursor: pointer
        }

        .ivu-drawer-close .ivu-icon-ios-close {
            font-size: 31px;
            color: #999;
            -webkit-transition: color .2s ease;
            transition: color .2s ease;
            position: relative;
            top: 1px
        }

        .ivu-drawer-close .ivu-icon-ios-close:hover {
            color: #444
        }

        .ivu-drawer-body {
            width: 100%;
            height: calc(100% - 51px);
            padding: 16px;
            font-size: 12px;
            line-height: 1.5;
            word-wrap: break-word;
            position: absolute;
            overflow: auto
        }

        .ivu-drawer-no-header .ivu-drawer-body {
            height: 100%
        }

        .ivu-drawer-no-mask {
            pointer-events: none
        }

        .move-left-appear, .move-left-enter-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }

        .move-left-leave-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }

        .move-left-appear, .move-left-enter-active {
            -webkit-animation-name: ivuMoveLeftIn;
            animation-name: ivuMoveLeftIn;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }

        .move-left-leave-active {
            -webkit-animation-name: ivuMoveLeftOut;
            animation-name: ivuMoveLeftOut;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }

        .move-left-appear, .move-left-enter-active {
            opacity: 0;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }

        .move-left-leave-active {
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }

        .move-right-appear, .move-right-enter-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }

        .move-right-leave-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }

        .move-right-appear, .move-right-enter-active {
            -webkit-animation-name: ivuMoveRightIn;
            animation-name: ivuMoveRightIn;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }

        .move-right-leave-active {
            -webkit-animation-name: ivuMoveRightOut;
            animation-name: ivuMoveRightOut;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }

        .move-right-appear, .move-right-enter-active {
            opacity: 0;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }

        .move-right-leave-active {
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }
        @-webkit-keyframes ivuMoveLeftIn {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
        }

        @keyframes ivuMoveLeftIn {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
        }

        @-webkit-keyframes ivuMoveLeftOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
        }

        @keyframes ivuMoveLeftOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
        }

        @-webkit-keyframes ivuMoveRightIn {
            0% {
                opacity: 0;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%)
            }
            100% {
                opacity: 1;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @keyframes ivuMoveRightIn {
            0% {
                opacity: 0;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%)
            }
            100% {
                opacity: 1;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @-webkit-keyframes ivuMoveRightOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0
            }
        }

        @keyframes ivuMoveRightOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="controller">
            <div class="controller-inner">
                <Row style="padding:0 0 10px 0">
                    <i-col :span="6" style="text-align:center;">
                        <i-button style="width:100px;" @click="drawCircular" icon="md-add">圆</i-button>
                    </i-col>
                    <i-col :span="6" style="text-align:center;">
                        <i-button style="width:100px;" @click="drawPolygon" icon="md-add">多边形</i-button>
                    </i-col>
                    <i-col :span="6" style="text-align:center;">
                        <i-button @click="areaModal" style="width:100px;" icon="md-add">行政区域</i-button>
                    </i-col>
                    <i-col :span="6" style="text-align:center;">
                        <i-button style="width:100px;" icon="md-add" @click="openDrawer">系统围栏</i-button>
                    </i-col>
                </Row>
                <i-table border stripe 
                    ref="selection"
                    :columns="columns" 
                    :data="tableData" 
                    :loading="loading" 
                    @on-row-click="handleClickRow" 
                    @on-selection-change="handleSelectChange"></i-table>
            </div>
        </div>
        <div id="bmap"></div>
        <transition name="el-zoom-in-bottom">
            <div class="area-ctrl" v-show="isCircular">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{isEidt?'编辑围栏':'新增围栏'}} - 半径:{{radius}}米</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="4" style="text-align:center;line-height:36px;">200米</i-col>
                    <i-col :span="16">
                        <Slider v-model="radius" :step="10" :min="min" :max="max" @on-change="changeValue"></Slider>
                    </i-col>
                    <i-col :span="4" style="text-align:center;line-height:36px;">100公里</i-col>
                </Row>
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <i-button @click="addCircular" style="width:200px;">保存</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-bottom">
            <div class="area-ctrl" v-show="isPolygon">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "编辑多边形":"添加多边形" }}</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 把鼠标移到 地图上单击开始绘制，双击结束绘制
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 20px 0;">
                        2 、 右键取消绘画
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-bottom">
            <div class="area-ctrl" v-show="modal">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{areaTitle}}</h3>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="6" style="text-align:center;line-height:32px;">
                         选择区域:   
                    </i-col>
                    <i-col :span="16">
                        <Cascader :data="provinceList" v-model="areaAddress"></Cascader>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <i-button @click="handleSubmitArea" style="width:200px;">保存</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>
        <Modal v-model="geoNameModal" width="400" title="修改围栏名称">
            <Row style="padding: 10px">
                <i-col :span="6" style="text-align:center;line-height:32px;">
                    围栏名称:   
                </i-col>
                <i-col :span="16">
                    <i-input v-model.trim="geoName"></i-input>
                </i-col>
            </Row>
            <div slot="footer" style="text-align:center;">
                <i-button style="width:80%;" @click="changeGeoName">确定</i-button>
            </div>
        </Modal>
        <Drawer title="添加系统围栏" width="400" v-model="drawerModal">
            <Row style="width:100%" v-if="userType < 2">
                <i-col :span="16">
                    <i-input style="width:100%;" v-model="searchValue" suffix="ios-search" placeholder="搜索"></i-input>
                </i-col>
                <i-col :span="8" style="padding:0 0 0 10px;">
                   <i-button @click="jumpSystemFence" style="width:100%;">设置系统围栏</i-button>
                </i-col>
            </Row>
            <Row style="width:100%" v-else>
                <i-col :span="24">
                    <i-input style="width:100%;" v-model="searchValue" suffix="ios-search" placeholder="搜索"></i-input>
                </i-col>
            </Row>
            <div class="tree-box">
                <Tree :data="treeData"></Tree>
            </div>
        </Drawer>
    </div>
    <script type="text/template" id="drawer-template">
        <div v-transfer-dom :data-transfer="transfer">
            <transition name="fade">
                <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
            </transition>
            <div :class="wrapClasses" @click="handleWrapClick">
                <transition :name="'move-' + placement">
                    <div :class="classes" :style="mainStyles" v-show="visible">
                        <div :class="contentClasses" ref="content">
                            <a class="ivu-drawer-close" v-if="closable" @click="close">
                                <slot name="close">
                                    <Icon type="ios-close"></Icon>
                                </slot>
                            </a>
                            <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
                            <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </script>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/area.js"></script>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=e7SC5rvmn2FsRNE4R1ygg44n"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>  
    <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />  
    <script>

        function getTarget (node) {
            if (node === void 0) {
                node = document.body
            }
            if (node === true) { return document.body }
            return node instanceof window.Node ? node : document.querySelector(node)
        };

        function findComponentsUpward (context, componentName) {
            var parents = [];
            var parent = context.$parent;
            if (parent) {
                if (parent.$options.name === componentName) parents.push(parent);
                return parents.concat(findComponentsUpward(parent, componentName));
            } else {
                return [];
            }
        }

        function findBrothersComponents (context, componentName, exceptMe) {
            var res = context.$parent.$children.filter(item => {
                return item.$options.name === componentName;
            });
            var index = res.findIndex(item => item._uid === context._uid);
            if (exceptMe) res.splice(index, 1);
            return res;
        }

        function oneOf (value, validList) {
            for (let i = 0; i < validList.length; i++) {
                if (value === validList[i]) {
                    return true;
                }
            }
            return false;
        }

        function broadcast(componentName, eventName, params) {
            this.$children.forEach(child => {
                var name = child.$options.name;
                if (name === componentName) {
                    child.$emit.apply(child, [eventName].concat(params));
                } else {
                    broadcast.apply(child, [componentName, eventName].concat([params]));
                }
            });
        }

        function getScrollBarSize (fresh) {
            if (isServer) return 0;
            if (fresh || cached === undefined) {
                var inner = document.createElement('div');
                inner.style.width = '100%';
                inner.style.height = '200px';

                var outer = document.createElement('div');
                var outerStyle = outer.style;

                outerStyle.position = 'absolute';
                outerStyle.top = 0;
                outerStyle.left = 0;
                outerStyle.pointerEvents = 'none';
                outerStyle.visibility = 'hidden';
                outerStyle.width = '200px';
                outerStyle.height = '150px';
                outerStyle.overflow = 'hidden';

                outer.appendChild(inner);

                document.body.appendChild(outer);

                var widthContained = inner.offsetWidth;
                outer.style.overflow = 'scroll';
                var widthScroll = inner.offsetWidth;

                if (widthContained === widthScroll) {
                    widthScroll = outer.clientWidth;
                }

                document.body.removeChild(outer);

                cached = widthContained - widthScroll;
            }
            return cached;
        }
        var prefixCls = 'ivu-drawer';
        var emitter = {
            methods: {
                dispatch :function (componentName, eventName, params) {
                    var parent = this.$parent || this.$root;
                    var name = parent.$options.name;

                    while (parent && (!name || name !== componentName)) {
                        parent = parent.$parent;

                        if (parent) {
                            name = parent.$options.name;
                        }
                    }
                    if (parent) {
                        parent.$emit.apply(parent, [eventName].concat(params));
                    }
                },
                broadcast:function(componentName, eventName, params) {
                    broadcast.call(this, componentName, eventName, params);
                }
            }
        }

        var ScrollbarMixins = {
            methods: {
                checkScrollBar :function() {
                    var fullWindowWidth = window.innerWidth;
                    if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
                        var documentElementRect = document.documentElement.getBoundingClientRect();
                        fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
                    }
                    this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
                    if (this.bodyIsOverflowing) {
                        this.scrollBarWidth = getScrollBarSize();
                    }
                },
                checkMaskInVisible :function() {
                    var masks = document.getElementsByClassName('ivu-modal-mask') || [];
                    return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-leave-to'));
                },
                setScrollBar :function() {
                    if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
                        document.body.style.paddingRight = `${this.scrollBarWidth}px`;
                    }
                },
                resetScrollBar :function() {
                    document.body.style.paddingRight = '';
                },
                addScrollEffect :function() {
                    this.checkScrollBar();
                    this.setScrollBar();
                    document.body.style.overflow = 'hidden';
                },
                removeScrollEffect:function() {
                    if (this.checkMaskInVisible()) {
                        document.body.style.overflow = '';
                        this.resetScrollBar();
                    }
                }
            }
        };
        Vue.component('Drawer',{
            template:document.getElementById("drawer-template").innerHTML,
            directives:{
                TransferDom:{
                    inserted :function(el, params, vnode) {
                        var value = params.value;
                        if ( el.dataset && el.dataset.transfer !== 'true') return false;
                        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
                        var parentNode = el.parentNode;
                        if (!parentNode) return;
                        var home = document.createComment('');
                        var hasMovedOut = false;

                        if (value !== false) {
                            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
                            getTarget(value).appendChild(el); // moving into new place
                            hasMovedOut = true
                        }
                        if (!el.__transferDomData) {
                            el.__transferDomData = {
                                parentNode: parentNode,
                                home: home,
                                target: getTarget(value),
                                hasMovedOut: hasMovedOut
                            }
                        }
                    },
                    componentUpdated :function(el, params) {
                        var value = params.value;
                        if ( el.dataset && el.dataset.transfer !== 'true') return false;
                        // need to make sure children are done updating (vs. `update`)
                        var ref$1 = el.__transferDomData;
                        if (!ref$1) return;
                        // homes.get(el)
                        var parentNode = ref$1.parentNode;
                        var home = ref$1.home;
                        var hasMovedOut = ref$1.hasMovedOut; // recall where home is

                        if (!hasMovedOut && value) {
                            // remove from document and leave placeholder
                            parentNode.replaceChild(home, el);
                            // append to target
                            getTarget(value).appendChild(el);
                            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) });
                        } else if (hasMovedOut && value === false) {
                            // previously moved, coming back home
                            parentNode.replaceChild(el, home);
                            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) });
                        } else if (value) {
                            // already moved, going somewhere else
                            getTarget(value).appendChild(el);
                        }
                    },
                    unbind  :function(el) {
                        if (el.dataset && el.dataset.transfer !== 'true') return false;
                        el.className = el.className.replace('v-transfer-dom', '');
                        var ref$1 = el.__transferDomData;
                        if (!ref$1) return;
                        if (el.__transferDomData.hasMovedOut === true) {
                            el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
                        }
                        el.__transferDomData = null
                    }
                }
            },
            mixins:[emitter,ScrollbarMixins],
            props: {
                value: {
                    type: Boolean,
                    default: false
                },
                title: {
                    type: String
                },
                width: {
                    type: [Number, String],
                    default: 256
                },
                closable: {
                    type: Boolean,
                    default: true
                },
                maskClosable: {
                    type: Boolean,
                    default: true
                },
                mask: {
                    type: Boolean,
                    default: true
                },
                maskStyle: {
                    type: Object
                },
                styles: {
                    type: Object
                },
                scrollable: {
                    type: Boolean,
                    default: false
                },
                placement: {
                    validator (value) {
                        return oneOf(value, ['left', 'right']);
                    },
                    default: 'right'
                },
                zIndex: {
                    type: Number,
                    default: 1000
                },
                transfer: {
                    type: Boolean,
                    default () {
                        return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
                    }
                },
                className: {
                    type: String
                },
                inner: {
                    type: Boolean,
                    default: false
                }
            },
            data  :function() {
                return {
                    prefixCls:prefixCls,
                    visible: this.value,
                    wrapShow: false,
                    showHead: true,
                };
            },
            computed: {
                wrapClasses  :function() {
                    return [
                        `${prefixCls}-wrap`,
                        {
                            [`${prefixCls}-hidden`]: !this.wrapShow,
                            [`${this.className}`]: !!this.className,
                            [`${prefixCls}-no-mask`]: !this.mask,
                            [`${prefixCls}-wrap-inner`]: this.inner
                        }
                    ];
                },
                mainStyles  :function() {
                    var style = {};

                    var width = parseInt(this.width);

                    var styleWidth = {
                        width: width <= 100 ? `${width}%` : `${width}px`
                    };

                    Object.assign(style, styleWidth);

                    return style;
                },
                contentClasses  :function() {
                    return [
                        `${prefixCls}-content`,
                        {
                            [`${prefixCls}-content-no-mask`]: !this.mask
                        }
                    ];
                },
                classes  :function() {
                    return [
                        `${prefixCls}`,
                        `${prefixCls}-${this.placement}`,
                        {
                            [`${prefixCls}-no-header`]: !this.showHead,
                            [`${prefixCls}-inner`]: this.inner
                        }
                    ];
                },
                maskClasses  :function() {
                    return [
                        `${prefixCls}-mask`,
                        {
                            [`${prefixCls}-mask-inner`]: this.inner
                        }
                    ];
                }
            },
            methods: {
                close  :function() {
                    this.visible = false;
                    this.$emit('input', false);
                    this.$emit('on-close');
                },
                handleMask  :function() {
                    if (this.maskClosable && this.mask) {
                        this.close();
                    }
                },
                handleWrapClick  :function(event) {
                    // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
                    var className = event.target.getAttribute('class');
                    if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
                },
            },
            mounted  :function() {
                if (this.visible) {
                    this.wrapShow = true;
                }

                var showHead = true;

                if (this.$slots.header === undefined && !this.title) {
                    showHead = false;
                }

                this.showHead = showHead;
            },
            beforeDestroy :function() {
                this.removeScrollEffect();
            },
            watch: {
                value  : function(val) {
                    this.visible = val;
                },
                visible : function(val) {
                    if (val === false) {
                        this.timer = setTimeout(() => {
                            this.wrapShow = false;
                            // #4831 Check if there are any drawers left at the parent level
                            var brotherDrawers = findBrothersComponents(this, 'Drawer',true) || [];
                            var parentDrawers = findComponentsUpward(this, 'Drawer') || [];

                            var otherDrawers = [].concat(brotherDrawers).concat(parentDrawers);

                            var isScrollDrawer = otherDrawers.some(item => item.visible && !item.scrollable);

                            if (!isScrollDrawer) {
                                this.removeScrollEffect();
                            }
                        }, 300);
                    } else {
                        if (this.timer) clearTimeout(this.timer);
                        this.wrapShow = true;
                        if (!this.scrollable) {
                            this.addScrollEffect();
                        }
                    }
                    this.broadcast('Table', 'on-visible-change', val);
                    this.broadcast('Slider', 'on-visible-change', val);  // #2852
                    this.$emit('on-visible-change', val);
                },
                scrollable :function(val) {
                    if (!val) {
                        this.addScrollEffect();
                    } else {
                        this.removeScrollEffect();
                    }
                },
                title :function(val) {
                    if (this.$slots.header === undefined) {
                        this.showHead = !!val;
                    }
                }
            }
        });

        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");
        var map = null;
        var vRoot = null;
        var rowData = null;
 
        var styleOptions = {  
            strokeColor:"red",    //边线颜色。  
            fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。  
            strokeWeight: 3,       //边线的宽度，以像素为单位。  
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。  
            fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。  
            strokeStyle: 'solid' //边线的样式，solid或dashed。  
        }  

        //实例化鼠标绘制工具  
        var drawingManager = null;  

 
        function startDrawPolygon(type){  
            drawingManager.open();   
            drawingManager.setDrawingMode(type);  
        }  

         function treeItemRender (h, params) {
            var root = params.root, node = params.node, row = params.data;
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '343px'
                                },
                            }, [
                                h('span', [
                                    h('span',{
                                        style: {
                                            width: '271px',
                                            lineHeight: '23px',
                                            display: 'inline-block',
                                        } ,
                                        on:{
                                            click:function(e){
                                                e.preventDefault(); 
                                                e.stopPropagation();
                                                if(row.children){
                                                    vRoot.handleSelectChange(row.children);
                                                }     
                                                return false;
                                            },
                                        } 
                                    }, row.title)
                                ]),
                                row.children? 
                                h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                
                                            } ,
                                            on: {
                                                click:function (e)  { 
                                                    e.preventDefault(); 
                                                    e.stopPropagation();
                                             
                                                    var url = myUrls.addGeoRecord();
                                                    var data = {
                                                        type:4,
                                                        categoryid4:row.categoryid,
                                                        name:row.title,
                                                        deviceid:deviceid
                                                    };
                                                    console.log('data', data);
                                                    utils.sendAjax(url,data,function (resp) { 
                                                        if(resp.status == 0){
                                                            vRoot.$Message.success("添加成功");
                                                            vRoot.getFenceInfo();
                                                        }else{
                                                            vRoot.$Message.error("添加失败");
                                                        }
                                                    })
                                                    return false;
                                                }
                                            }
                                },"添加"):null,
                            ]);
                    }

        (function () { 
            vRoot = new Vue({
                    el:"#container",
                    data:{
                        tipTitle:"多边形提示",
                        tipContent:'点击多边形按钮,单击画图,双击结束',
                        isEidt:false,
                        map:null,
                        geoName:'',
                        geoNameModal:false,
                        drawerModal:false,
                        searchValue:'',
                        columns:[
                            {
                                type: 'selection',
                                width: 60,
                                align: 'center'
                            },
                            {
                                type:'index',
                                width:60,
                                align:'center',
                            },
                            {
                                title: '类型',
                                key: 'type',
                                width:90,
                                render: function(h, params) {
                                    var type = '';
                                    switch(params.row.type){
                                        case 1 :
                                            type = '圆'
                                            break;
                                        case 2 :
                                            type = '多边形'
                                            break;
                                        case 3 :
                                            type = '行政区域'
                                            break;
                                        case 4 :
                                            type = '系统围栏'
                                            break;
                                    }
                                    return h('div',[h('span', {}, type)]);
                                } 
                            },
                            {
                                title: '名称',
                                key: 'geoname',
                                render: function(h, params) {
                                    return h('div',[
                                    h('span', {                                       
                                        }, params.row.name),
                                    ,
                                    h('Icon', {
                                            props: {
                                                size: 20,
                                                type:"md-create" 
                                            },
                                            style: {
                                                marginLeft:'5px'
                                            },
                                            on: {
                                                click: function(e) {
                                                    e.preventDefault(); 
                                                    e.stopPropagation();
                                                   vRoot.geoNameModal = true;
                                                   rowData = params.row;
                                                   vRoot.geoName = params.row.name;
                                                   return false;
                                                }
                                            }
                                        }, ""),
                                    ])
                                }
                            },
                            {
                                title: '操作',
                                key: 'action',
                                width: 80,
                                render: function(h, params) {
                                    return h('div', [
                                        h('Button', {
                                            props: {
                                                type: 'error',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                            on: {
                                                click: function(e) {
                                                    e.preventDefault();
                                                    e.stopPropagation();
                                                    vRoot.$Modal.confirm({
                                                        title: "温馨提示",
                                                        content:"确定要删除围栏吗?",
                                                        onOk:function(){
                                                            var url = myUrls.delGeoRecord() , index = params.index , row = params.row ;
                                                            var data = {
                                                                deviceid:deviceid,
                                                                georecordid:row.georecordid
                                                            };
                                                            utils.sendAjax(url,data,function (resp) {
                                                                if(resp.status === 0){
                                                                    vRoot.tableData.splice(index,1);
                                                                    vRoot.$Message.success("删除成功");
                                                                    vRoot.map.clearOverlays();
                                                                }else{
                                                                    vRoot.$Message.success("删除失败");
                                                                }
                                                            })
                                                        }
                                                    })
                                                    return false;
                                                }
                                            }
                                        }, "删除"),
                                    ]);
                                }
                            }
                        ],
                        tableData:[],
                        treeData:[],
                        originalData:[],
                        loading:false,
                        isCircular:false,
                        isPolygon:false,
                        markerIns:null,
                        circularIns:null,
                        radius:2000,
                        min:200,
                        max:100000,
                        modal:false,
                        type:null, // 1 是圈 2是多边形 3是行政区域'
                        areaAddress:[],
                        mapCenterPoint:null,
                        provinceList:provinceList,
                        userType:Cookies.get('userType')
                    },
                    methods: {
                        jumpSystemFence:function(){
                            var url = 'setfencesystem.html?deviceid=' + deviceid + '&token=' + token;
                            window.open(url);
                        },
                        initMap : function(){
                            var self = this;
                            var point = null;
                            this.map = new BMap.Map("bmap",{minZoom:4,maxZoom:20});           
                            this.map.enableScrollWheelZoom();
                            this.map.enableAutoResize();
                            this.map.disableDoubleClickZoom();
                            this.map.centerAndZoom(new BMap.Point(108.0017245, 35.926895), 5)
                            this.map.addControl(new BMap.CityListControl({
                                anchor: BMAP_ANCHOR_TOP_LEFT,
                                offset: new BMap.Size(10, 20),
                                // 切换城市之间事件
                                // onChangeBefore: function(){
                                //    alert('before');
                                // },
                                // 切换城市之后事件
                                // onChangeAfter:function(){
                                 
                                // }
                            }));


                            this.map.addEventListener("moveend",function(e){   
                                if(!self.isCircular) return;	
                                self.getMapCenterPoint();
                                self.markerIns.setPosition(self.mapCenterPoint);
                                self.circularIns.setCenter(self.mapCenterPoint);
                            },false);   

                            this.map.addEventListener("zoomend",function(e){   	  
                                if(!self.isCircular) return;	
                                self.getMapCenterPoint();
                                self.markerIns.setPosition(self.mapCenterPoint);
                                self.circularIns.setCenter(self.mapCenterPoint);
                            },false);


                            this.map.addEventListener("rightclick",function(e){  
                                if(self.type!== 2) return;
                                drawingManager.close();  
                                self.map.clearOverlays();
                            }); 

                            drawingManager = new BMapLib.DrawingManager(this.map, {  
                                isOpen: false, //是否开启绘制模式  
                                enableDrawingTool: false, //是否显示工具栏  
                                drawingToolOptions: {  
                                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
                                    offset: new BMap.Size(5, 5), //偏离值  
                                },  
                                circleOptions: styleOptions, //圆的样式  
                                polylineOptions: styleOptions, //线的样式  
                                polygonOptions: styleOptions, //多边形的样式  
                                rectangleOptions: styleOptions //矩形的样式  
                            });    

                            //添加鼠标绘制工具监听事件，用于获取绘制结果  
                            drawingManager.addEventListener('polygoncomplete', this.overlaycomplete);  

                            map = this.map;

                        },
                        overlaycomplete : function(overlay){  
                            var path = overlay.getPath() , self = this;
                            self.$Modal.confirm({
                                    title: "温馨提示",
                                    content:"是否提交多边形围栏?",
                                    onOk:function(){
                                        console.log('overlay', overlay);
                                        var mapPath = function (item) {  
                                            var lon_lat = bd09towgs84(item.lng,item.lat);
                                            wgs84Path.push({
                                                lon:lon_lat[0].toFixed(6),
                                                lat:lon_lat[1].toFixed(6)
                                            });
                                        };
                                        var wgs84Path = [];
                                        path.forEach(mapPath);
                                        var url = myUrls.addGeoRecord(),
                                            data = {
                                                points2:JSON.stringify(wgs84Path),
                                                type:self.type,
                                                deviceid:deviceid
                                            };

                                        utils.sendAjax(url,data,function (resp) {     
                                            if(resp.status === 0){
                                                self.$Message.success("添加成功")
                                                self.getFenceInfo();
                                            }else{
                                                self.$Message.error("添加失败")
                                            };
                                            self.map.removeOverlay(overlay)
                                        })
                                    },
                                    onCancel:function(){
                                        self.map.removeOverlay(overlay);
                                    }
                                })
                        },
                        claerPolygon:function(){
                            this.map.clearOverlays();
                            this.drawingManager.close(); 
                            startDrawPolygon(BMAP_DRAWING_POLYGON);
                        },
                        getAreaName:function(province,city,county){
                            var result = [];
                             for (var index = 0; index < provinceList.length; index++) {
                                 var provinceInfo = provinceList[index];
                                 if(provinceInfo.value == province){
                                     var cityList = provinceInfo.children;
                                     result.push(provinceInfo.label);
                                     cityList.forEach(function (cityInfo) { 
                                         if(cityInfo.value == city){
                                            result.push(cityInfo.label);
                                            var countyList = cityInfo.children;
                                            countyList.forEach(function (countyInfo) {
                                                if(countyInfo.value == county){
                                                    result.push(countyInfo.label);
                                                    return false;
                                                }
                                            })
                                            return false;
                                         }
                                     });
                                     break;
                                 }
                             } 
                            return result;
                        },
                        transformPoint:function(pointList){
                            var points = [];
                            var iteratior = function (item) { 
                                var pointStr = item.split(',')
                                var pointArr = bd09towgs84(Number(pointStr[0].trim()),Number(pointStr[1].trim()));
                                points.push({
                                    lon:pointArr[0].toFixed(6),
                                    lat:pointArr[1].toFixed(6),
                                })
                            }
                            pointList.forEach(iteratior);
                            return points;
                        },
                        getWgs84Boundaries:function(boundaries){
                            var pointList = [] , me = this;
                            boundaries.forEach(function (item) { 
                                var points = me.transformPoint(item.split(";"));
                                pointList = pointList.concat(points);
                            })
                            return pointList;
                        },
                        handleSubmitArea:function(){
                            if(this.areaAddress.length){
                                var areaName = this.getAreaName(this.areaAddress[0],this.areaAddress[1],this.areaAddress[2]) , me = this;
                                var myBoundary  = new BMap.Boundary();
                                myBoundary.get(areaName.join(','),function(resp){
                                    if(resp.boundaries.length){
                                        var points3 = me.getWgs84Boundaries(resp.boundaries);                                        
                                        var points3Str = JSON.stringify(points3);
                                        if(me.isEidt){
                                            var url = myUrls.editGeoRecord();
                                            var data = deepClone(rowData);
                                            data.points3 = points3Str;
                                            data.provinceindex3=Number(me.areaAddress[0]);
                                            data.cityindex3=Number(me.areaAddress[1]);
                                            data.areaindex3=Number(me.areaAddress[2]);
                                            data.provincestr3=areaName[0];
                                            data.citystr3=areaName[1];
                                            data.areastr3=areaName[2];
                                        }else{
                                            var url = myUrls.addGeoRecord();
                                            var data = {
                                                name:areaName.join(','),
                                                points3:points3Str,
                                                deviceid:deviceid,
                                                provinceindex3:Number(me.areaAddress[0]),
                                                cityindex3:Number(me.areaAddress[1]),
                                                areaindex3:Number(me.areaAddress[2]),
                                                provincestr3:areaName[0],
                                                citystr3:areaName[1],
                                                areastr3:areaName[2],
                                                type:me.type,
                                            }
                                        }
                                        
                                        utils.sendAjax(url,data,function (resp) { 
                                            if(resp.status === 0){
                                                if(me.isEidt){
                                                    me.$Message.success("编辑成功");
                                                }else{
                                                    me.$Message.success("添加成功");
                                                }
                                                me.map.clearOverlays();
                                                me.redrawAreaAndViewPortCenter(points3Str);
                                                me.getFenceInfo();
                                            }else{
                                                me.$Message.error("操作失败");
                                            }
                                        })
                                    }else{

                                    }
                                });
                            }else{
                                this.$Message.error("请选择地区");
                            }

                        },
                        changeValue:function(e){
                            this.circularIns.setRadius(e);
                        },
                        changeGeoName:function(){
                            if(this.geoName.trim()!==""){
                                var url = myUrls.editGeoRecord() , me = this;
                                var data = deepClone(rowData);
                                data.name = me.geoName;
                                utils.sendAjax(url,data,function (resp) { 
                                    if(resp.status === 0){
                                        rowData.name = me.geoName;
                                        me.geoNameModal = false;
                                        me.geoName = "";
                                        me.$Message.success("修改成功");
                                    }else{
                                        me.$Message.error("修改失败");
                                    }
                                })
                            }else{
                                this.$Message.error("请填写名称");
                            }
                        },
                        areaModal:function(){
                            this.isCircular = false;
                            this.isPolygon = false;
                            this.type = 3;
                            this.modal = true;
                            this.isEidt = false;
                            this.areaAddress = [];
                            drawingManager.close();  
                            this.map.clearOverlays();
                        },
                        handleClickRow:function(row,index){
                            rowData = row;
                            var type = row.type , me = this;
                            this.$refs.selection.selectAll(false);
                            this.map.clearOverlays();
                            this.isEidt = true;
                            drawingManager.close();  
                            switch(type){
                                case 1 :
                                me.modal = false;
                                var lon_lan = wgs84tobd09(row.lon1,row.lat1);
                                var point = new BMap.Point(lon_lan[0],lon_lan[1]);
                                    me.radius = row.radius1;
                                    me.map.setCenter(point);
                                    me.setMapZoom(me.radius);
                                    setTimeout(function () { 
                                        me.drawCircular();
                                        me.isEidt = true;     
                                    },300);
                                    break;
                                case 2 :
                                    this.modal = false;
                                    this.isCircular = false;
                                    this.isPolygon = true;
                                    this.redrawPolygon(row);
                                    break;
                                case 3 :
                                    me.isCircular = false;
                                    me.areaAddress = [String(row.provinceindex3),String(row.cityindex3),String(row.areaindex3)];
                                    me.modal = true;
                                    me.redrawAreaAndViewPortCenter(row.points3);
                                    break;
                                case 4 :
                                    var categoryid = row.categoryid4;
                                    var info = me.getTreeItemData(categoryid);
                                    me.handleSelectChange(info.children)                                  
                                    break;
                            }
                        },
                        getTreeItemData:function(categoryid){
                            var result = null;
                            this.originalData.forEach(function(record){
                                if(record.categoryid === categoryid){
                                    result = record;
                                }
                            });
                            return result;
                        },
                        handleSelectChange:function(selection){
                            this.modal = false;
                            this.isCircular = false;
                            this.isPolygon = false;
                            this.map.clearOverlays();
                            drawingManager.close(); 
                            var me = this;
                            if(selection.length){
                                var points = []
                                for (var index = 0; index < selection.length; index++) {
                                    var element = selection[index];
                                    this.drawAllOverlays(element);
                                    switch(element.type){
                                        case 1 :
                                            var lon_lan = wgs84tobd09(element.lon1,element.lat1);
                                            var point = new BMap.Point(lon_lan[0],lon_lan[1]);
                                            points.push(point);
                                            break;
                                        case 2 :
                                            points = points.concat(this.wgs84tobd09Points(element.points2));
                                            break;
                                        case 3 :
                                            points = points.concat(this.wgs84tobd09Points(element.points3));
                                            break;
                                        case 4 :
                                            var categoryid = element.categoryid4; 
                                            var info = this.getTreeItemData(categoryid);
                                            if(info){
                                                info.children.forEach(function(record){
                                                    me.drawAllOverlays(record);
                                                    switch(record.type){
                                                        case 1 :
                                                            var lon_lan = wgs84tobd09(record.lon1,record.lat1);
                                                            var point = new BMap.Point(lon_lan[0],lon_lan[1]);
                                                            points.push(point);
                                                            break;
                                                        case 2 :
                                                            points = points.concat(me.wgs84tobd09Points(record.points2));
                                                            break;
                                                    }
                                                });
                                            }
                                            break;
                                    }
                                }
                                this.setViewPortCenter(points);
                            }
                        },
                        drawAllOverlays:function(row){
                            var type = row.type , me = this;
                            switch(type){
                                case 1 :
                                    var lon_lan = wgs84tobd09(row.lon1,row.lat1);
                                    var markerPoint = new BMap.Point(lon_lan[0],lon_lan[1]);
                                    var marker = new BMap.Marker(markerPoint);
                                    var circular = new BMap.Circle(markerPoint,row.radius1,styleOptions);
                                    this.map.addOverlay(marker);  
                                    this.map.addOverlay(circular); 
                                    break;
                                case 2 :
                                    var bdpoints = this.wgs84tobd09Points(row.points2);
                                    var polygon = new BMap.Polygon(bdpoints, styleOptions);  
                                    this.map.addOverlay(polygon); 
                                    break;
                                case 3 :
                                    this.redrawArea(row.points3);
                                    break;
                            }
                        },
                        drawCircular:function(){
                            drawingManager.close(); 
                            this.map.clearOverlays();   
                            this.isEidt = false;
                            this.getMapCenterPoint();
                            this.isCircular = true;
                            this.isPolygon = false;
                            this.type = 1;
                            this.markerIns = new BMap.Marker(this.mapCenterPoint);
                            // this.markerIns .enableDragging();
                            this.map.addOverlay(this.markerIns);  
                            this.circularIns = new BMap.Circle(this.mapCenterPoint,this.radius,styleOptions);
                            this.map.addOverlay(this.circularIns);  
                        },
                        addCircular:function(){
                            var url = null , me = this , data = null;
                            var lng_lat = bd09towgs84(this.mapCenterPoint.lng,this.mapCenterPoint.lat);  	
                            
                            if(this.isEidt){
                                url = myUrls.editGeoRecord() ;
                                data = deepClone(rowData);
                                data.lat1 = lng_lat[1];
                                data.lon1 = lng_lat[0];
                                data.radius1 = this.radius;
                            }else{
                                url = myUrls.addGeoRecord() ;
                                data = {
                                    deviceid:deviceid,
                                    type:this.type,
                                    lat1: lng_lat[1],   
                                    lon1: lng_lat[0],   
                                    radius1:this.radius
                                };
                            }
                            utils.sendAjax(url,data,function (resp) { 
                                if(resp.status === 0){
                                    me.map.clearOverlays();
                                    me.getFenceInfo();
                                    me.isCircular = false;
                                    if(me.isEidt){
                                        me.$Message.success("编辑围栏成功");
                                    }else{
                                        me.$Message.success("保存围栏成功");
                                    }; 
                                }else{
                                    me.$Message.error("保存围栏失败");
                                };
                            });
                        },
                        drawPolygon:function(){
                            this.type = 2;
                            this.map.clearOverlays();
                            this.isCircular = false;
                            this.modal = false;
                            this.isPolygon = true;
                            this.isEidt = false;
                            startDrawPolygon(BMAP_DRAWING_POLYGON);
                        },
                        wgs84tobd09Points:function(pointsStr){
                            var points = JSON.parse(pointsStr);
                            var bdpoints = [];
                                points.forEach(function (item) { 
                                    var lon_lat = wgs84tobd09(Number(item.lon),Number(item.lat));                     
                                    bdpoints.push(new BMap.Point(lon_lat[0],lon_lat[1]))
                                });
                            return bdpoints;
                        },
                        redrawPolygon:function(row){
                            var bdpoints = this.wgs84tobd09Points(row.points2);
                            var polygon = new BMap.Polygon(bdpoints, styleOptions);  
                            this.map.addOverlay(polygon); 
                            this.setViewPortCenter(bdpoints);
                        },
                        redrawArea:function(pointsStr){
                            var bdpoints = this.wgs84tobd09Points(pointsStr);
                            var polygon = new BMap.Polygon(bdpoints, styleOptions);  
                            this.map.addOverlay(polygon); 
                        },
                        redrawAreaAndViewPortCenter:function(pointsStr){
                            var bdpoints = this.wgs84tobd09Points(pointsStr);
                            var polygon = new BMap.Polygon(bdpoints,styleOptions);  
                            this.map.addOverlay(polygon); 
                            this.setViewPortCenter(bdpoints);
                        },
                        setViewPortCenter: function (lines) {
                            var view = this.map.getViewport(eval(lines));
                            var mapZoom = view.zoom;
                            var centerPoint = view.center;
                            this.map.centerAndZoom(centerPoint, mapZoom);
                        },
                        getMapCenterPoint:function(){
                            var pt = this.map.getCenter();							
                                this.mapCenterPoint = pt;                               
                        },
                        getFenceInfo:function(){
                            var url = myUrls.queryGeoRecords();
                            utils.sendAjax(url,{deviceid:deviceid},this.doFenceInfo);
                        },
                        doFenceInfo:function(resp){
                            if(resp.status === 0 && resp.records && resp.records.length){
                                this.tableData = resp.records;
                            }else{
                                this.$Message.error('没有数据');
                            }
                        },
                        setMapZoom:function(value){
                            var zoom = 4;
                            if(value > 90000){
                                zoom = 5;
                            }else if(value > 90000){
                                zoom = 6;
                            }else if(value > 70000){
                                zoom = 7;
                            }else if(value > 50000){
                                zoom = 8;
                            }else if(value > 40000){
                                zoom = 9;
                            }else if(value > 30000){
                                zoom = 10;
                            }else if(value > 20000){
                                zoom = 11;
                            }else if(value > 10000){
                                zoom = 12;
                            }else if(value > 5000){
                                zoom = 13;
                            }else if(value > 1000){
                                zoom = 14;
                            }else{
                                zoom = 16;
                            };
                            this.map.setZoom(zoom);
                        },
                        openDrawer:function(){
                            this.drawerModal = true;
                        },
                        _queryGeoSystemRecords:function(){
                            var url = myUrls.queryGeoSystemRecords() , me = this;
                            utils.sendAjax(url,{},function(resp){
                                if(resp.status == 0){
                                    if(resp.categorys){
                                        me.filterOriginalData(resp.categorys);
                                    }
                                }
                            })
                        },
                        filterOriginalData:function(categorys){
                            var originalData = [];
                            categorys.forEach(function(item){
                                var treeItem = {
                                    title:item.name,
                                    categoryid:item.categoryid,
                                    children:[],
                                    render:treeItemRender
                                };
                                item.records.forEach(function(record){
                                    record.title = record.name;
                                    record.render = treeItemRender;
                                    record.categoryid = item.categoryid,
                                    treeItem.children.push(record);
                                
                                });
                                originalData.push(treeItem);
                            });
                            this.originalData = originalData;
                            this.treeData = originalData;
                        },
                        searchChange:utils.debounce(function(vm,value){
                            if(value){
                                var filterData = [];
                                var originalData = deepClone(vm.originalData);
                                originalData.forEach(function (item) {
                                    item.expand = true;
                                    if(item.title.indexOf(value)!=-1){
                                        filterData.push(item);     
                                    }else{
                                        var children = []
                                        item.children.forEach(function(record){
                                            if(record.title.indexOf(value)!=-1){
                                                children.push(record);
                                            }
                                        });
                                        if(children.length){
                                            item.children = children;
                                            filterData.push(item);  
                                        }
                                    }
                                });
                                vm.treeData = filterData;
                            }else{
                                vm.treeData = vm.originalData; 
                            } 
                        },500),
                    },
                    computed:{
                        areaTitle:function(){
                            if(this.isEidt){
                                return '编辑区域围栏';
                            }else{
                                return '添加区域围栏';
                            }
                        }
                    },
                    watch: {
                        searchValue:function(newValue){
                            this.searchChange(this,newValue);   
                        },
                    },
                    mounted:function () {
                        this.initMap();
                        this.getFenceInfo();
                        this._queryGeoSystemRecords();
                    }
            });
        })();
    </script>
</body>
</html>